<?php
    include('header.php');
    
    $db = db_connect();
    
    $sql = 'SELECT * FROM house_plan ORDER BY style_id,plan_name';
    $result = mysql_query($sql);
    $i = TRUE;
    $house_ = array();
    $house_list[1] = '';
    $house_list[2] = '';
    
    while($row=mysql_fetch_assoc($result)){
	if($i){
	    $house_['img1'] = $row['style_id'].'/'.$row['plan_id'].'/'.$row['plan_img_1'];
	    $house_['img2'] = $row['style_id'].'/'.$row['plan_id'].'/'.$row['plan_img_2'];
	    $house_['img3'] = $row['style_id'].'/'.$row['plan_id'].'/'.$row['plan_img_3'];
	    $house_['plan_name'] = $row['plan_name'];
	    $house_['plan_size'] = $row['plan_size'];
	    $house_['plan_dimension_x'] = $row['plan_dimension_x'];
	    $house_['plan_dimension_y'] = $row['plan_dimension_y'];
	    $house_['plan_detail'] = $row['plan_detail'];
	    if($row['style_id']==1){
		$house_['plan_style'] = 'CONTEMPORARY STYLE';
	    }else{
		$house_['plan_style'] = 'Modern style';
	    }
	}
	
	$house_list[$row['style_id']] .= '<option value="'.$row['plan_id'].'">'.$row['plan_name'].'</option>';
	$i = FALSE;
    }
    
    db_close($db);
?>
    <div id="house">
        <h3>แบบบ้าน</h3>
	<div id="house_content">
	    <div id="house_content_img">
		<img src="images/house/<?php echo $house_['img1']; ?>" alt="Perspective View" />
	    </div>
	    <div id="house_content_detail">
		<div id="house_content_select_style">
		    <select name="area" class="mySelect" id="mySelect3">
			<option value="0" disabled="disabled">---------- CONTEMPORARY STYLE ----------</option>
			<?php echo $house_list[1]; ?>
			<option value="0" disabled="disabled">------------- MODERN STYLE -------------</option>
			<?php echo $house_list[2]; ?>
		    </select>
		</div>
		<div id="house_content_detail_">
		    <p id="plan_style">
			<?php echo $house_['plan_style']; ?>
		    </p>
		    <p id="plan_name">
			แบบบ้าน : <?php echo $house_['plan_name']; ?>
		    </p>
		    <p id="plan_size">
			พื้นที่ใช้สอย : <?php echo $house_['plan_size']; ?> ตร.ม.
		    </p>
		    <p id="plan_dimension">
			ขนาดที่ดิน : <?php echo $house_['plan_dimension_x']; ?> ม. x <?php echo $house_['plan_dimension_y']; ?> ม.
		    </p>
		    <p id="plan_detail">
			ส่วนประกอบของบ้าน : <?php echo $house_['plan_detail']; ?>
		    </p>
		</div>
		<table id="thumb_img">
		    <tr>
			<td id="thumb_img_1">
			    <img src="images/house/<?php echo $house_['img1']; ?>" alt="Perspective View" class="thumb_img thumb_active" />
			    <p>Perspective</p>
			</td>
			<td id="thumb_img_2">
			    <img src="images/house/<?php echo $house_['img2']; ?>" alt="Plan 1" class="thumb_img" />
			    <p>Plan 1</p>
			</td>
			<td id="thumb_img_3">
			    <img src="images/house/<?php echo $house_['img3']; ?>" alt="Plan 2" class="thumb_img" />
			    <p>Plan 2</p>
			</td>
		    </tr>
		</table>
	    </div>
	    <div class="clear">&nbsp;</div>
	</div>
    </div>
    <script>
	$(document).ready(function(){
	    $('.thumb_img').click(function(){
		$('.thumb_img').removeClass('thumb_active');
		$(this).addClass('thumb_active')
		$('#house_content_img').find('img').attr('src',$(this).attr('src'));
	    });
	    
	    $("#mySelect3").bind('change keypress',function() {
		var value = $("#mySelect3 option:selected").val();
		
		if(value!=0){
		    $.post("function/house_load.php", { "plan_id": value },function(data){
			
			//alert(data.plan_style);
			$('#house_content_img').find('img').attr('src','images/house/'+data.img1);
			$('#plan_style').html(data.plan_style);
			$('#plan_name').html('แบบบ้าน : '+data.plan_name);
			$('#plan_size').html('พื้นที่ใช้สอย : '+data.plan_size);
			$('#plan_dimension').html('ขนาดที่ดิน : '+data.plan_dimension_x +' ม. x '+ data.plan_dimension_y+' ม.');
			$('#plan_detail').html('ส่วนประกอบของบ้าน : '+data.plan_detail);
			
			$('#thumb_img_1').find('img').attr('src','images/house/'+data.img1);
			$('#thumb_img_2').find('img').attr('src','images/house/'+data.img2);
			$('#thumb_img_3').find('img').attr('src','images/house/'+data.img3);
		    }, "json");
		}
	    });
        });
    </script>
<?php
    include('footer.php');
?>